<template>
  <el-aside :width="asideWidth" class="sidebar">
    <div class="logo">
      <h2 v-if="!collapsed">管理后台</h2>
      <h2 v-else>管</h2>
    </div>
    <el-menu :default-active="activeMenu" class="sidebar-menu" background-color="#667eea" text-color="#ffffff"
      active-text-color="#ffffff" router :collapse="collapsed">
      <el-menu-item index="/admin/dashboard">
        <el-icon>
          <Histogram />
        </el-icon>
        <span v-if="!collapsed">仪表盘</span>
      </el-menu-item>
      <el-menu-item index="/admin/users">
        <el-icon>
          <User />
        </el-icon>
        <span v-if="!collapsed">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/roles">
        <el-icon>
          <UserFilled />
        </el-icon>
        <span v-if="!collapsed">角色管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/permissions">
        <el-icon>
          <Lock />
        </el-icon>
        <span v-if="!collapsed">权限管理</span>
      </el-menu-item>
 
      <el-menu-item index="/admin/knowledge-bases">
        <el-icon>
          <Document />
        </el-icon>
        <span v-if="!collapsed">知识库管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/documents">
        <el-icon>
          <Document />
        </el-icon>
        <span v-if="!collapsed">文档管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/qa">
        <el-icon>
          <Message />
        </el-icon>
        <span v-if="!collapsed">问答管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/vectors">
        <el-icon>
          <Connection />
        </el-icon>
        <span v-if="!collapsed">向量管理</span>
      </el-menu-item>
      <el-menu-item index="/admin/system">
        <el-icon>
          <Setting />
        </el-icon>
        <span v-if="!collapsed">系统管理</span>
      </el-menu-item>
      <el-menu-item :index="activeMenu">
        <a href="http://rag-ai-miniprogram.monkeymeerkat.cn/" target="_blank" rel="noopener" @click.stop style="display:flex;align-items:center;color:inherit;text-decoration:none;width:100%">
          <el-icon>
            <Link />
          </el-icon>
          <span v-if="!collapsed">AI 问答</span>
        </a>
      </el-menu-item>
  
    </el-menu>
  </el-aside>
</template>

<script setup>
import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import { Histogram, User, UserFilled, Document, Setting, Lock, Message, Connection, Link } from '@element-plus/icons-vue'
const props = defineProps({
  collapsed: Boolean
})
const route = useRoute()
const activeMenu = computed(() => route.path)

// 保留外链函数以备复用（当前实现使用 <a> 直链）
const openExternal = () => window.open('http://rag-ai-miniprogram.monkeymeerkat.cn/', '_blank')

// 根据窗口宽度判断是否为移动端，从而在折叠时完全隐藏侧边栏
const isMobile = ref(false)
const updateIsMobile = () => {
  isMobile.value = window.innerWidth <= 768
}
onMounted(() => {
  updateIsMobile()
  window.addEventListener('resize', updateIsMobile)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateIsMobile)
})

const asideWidth = computed(() => {
  if (!props.collapsed) return '250px'
  return isMobile.value ? '0' : '64px'
})
</script>

<style scoped>
.sidebar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  flex-shrink: 0;
  box-shadow: 2px 0 8px rgba(0,0,0,0.08);
  transition: width 0.2s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; /* 如果内容超出视口高度，允许滚动 */
}
.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
}
.logo h2 {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
  transition: all 0.2s;
}
.sidebar-menu {
  border-right: none;
  background: transparent !important;
}
.sidebar-menu :deep(.el-menu-item) {
  color: #ffffff !important;
  background: transparent !important;
  border-radius: 8px;
  margin: 4px 8px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}
.sidebar-menu :deep(.el-menu-item .el-icon) {
  margin-right: 8px;
  transition: all 0.2s;
}
:deep(.el-menu--collapse) .el-menu-item {
  justify-content: center !important;
}
:deep(.el-menu--collapse) .el-menu-item .el-icon {
  margin-right: 0 !important;
}
.sidebar-menu :deep(.el-menu-item:hover) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}
.sidebar-menu :deep(.el-menu-item.is-active) {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 菜单项点击动画 */
.sidebar-menu :deep(.el-menu-item) {
  position: relative;
  overflow: hidden;
}

.sidebar-menu :deep(.el-menu-item::before) {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  pointer-events: none;
}

.sidebar-menu :deep(.el-menu-item:active::before) {
  width: 100px;
  height: 100px;
}

/* 图标动画 */
.sidebar-menu :deep(.el-menu-item:hover .el-icon) {
  transform: scale(1.1);
}

.sidebar-menu :deep(.el-menu-item.is-active .el-icon) {
  animation: iconPulse 0.3s ease;
}

@keyframes iconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>
